<template>
  <div class="exam">
    <!-- 头部 -->
    <div class="head">
      <div class="tilte">面试宝典</div>

      <van-dropdown-menu>
        <van-dropdown-item ref="item" :title="title">
          <van-index-bar>
            <div v-for="(item, index) in cityIndex" :key="index">
              <van-index-anchor :index="item" style="background: #f7f4f5" />
              <van-cell
                v-for="subItem in cities[item]"
                :key="subItem"
                :title="subItem"
                @click="checkCity(subItem)"
              />
            </div>
          </van-index-bar>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>

    <!-- 导航栏 -->
    <van-cell>
      <div class="navigation">
        <van-tag
          :class="{ navigationActive: index == pitch }"
          v-for="(item, index) in keyWord"
          @click="active(item.id, index)"
          :key="item.id"
          >{{ item.name }}</van-tag
        >
      </div>
    </van-cell>

    <!-- 刷题 -->

    <div class="nav-box">
      <div class="leftbox">
        <div>
          <div>
            <i
              class="iconfont iconicon_mine_cuoti"
              style="background: #ff5a5a"
            ></i>
          </div>
          常错题库
        </div>

        <div>
          <div>
            <i
              class="iconfont iconicon_mine_qiyeshoucang"
              style="background: #00c9df"
            ></i>
          </div>
          企业题库
        </div>
      </div>
      <div class="centrebox">
        <div class="center">
          <van-circle
            class="circle"
            v-model="currentRate"
            :rate="30"
            :speed="100"
            :stroke-width="60"
            layer-color="none"
            color="#ee6c8b"
          >
            <div class="circle-div">
              <div style="padding-top: 30px">顺序刷题</div>
              <div style="margin-top: 10px">50/233</div>
            </div>
          </van-circle>
        </div>
      </div>
      <div class="rightbox">
        <div>
          <div>
            <i
              class="iconfont iconicon_mine_tikushoucang"
              style="background: #ffb802"
            ></i>
          </div>
          收藏题库
        </div>
        <div>
          <div>
            <i
              class="iconfont iconicon_mine_mianjing"
              style="background: #23cc83"
            ></i>
          </div>
          已答题库
        </div>
      </div>
    </div>

    <div class="rump">
      <h4>累计收录</h4>
      <h5>126</h5>
    </div>

    <van-button
      type="primary"
      size="large"
      color="#00b8d4"
      block
      @click="$router.push(`/interview?type=${id}&city=${title}`)"
      >模拟面试</van-button
    >
  </div>
</template>

<script>
import { getFiltersDataAPI } from '@/api'
export default {
  data () {
    return {
      currentRate: 0,
      title: '全国',
      cities: {},
      cityIndex: [],
      cityPositions: {}, // 城市名
      type: '',
      pitch: 0,
      id: 0 // 职位id
    }
  },
  computed: {
    keyWord () {
      return this.cityPositions[this.title]
    }
  },
  watch: {
    keyWord () {
      this.type =
        this.cityPositions[this.title] && this.cityPositions[this.title][0].id
    }
  },

  methods: {
    checkCity (subitem) {
      //   console.log(subitem)
      this.title = subitem

      this.navigation = this.cityPositions[subitem]
      // console.log(this.navigation[0].id)
      this.$refs.item.toggle(false)
      // console.log('this.title:', this.title)
    },
    active (id, index) {
      this.pitch = index
      this.id = id
      // console.log('this.id:', this.id)
    }
  },
  async created () {
    // 请求城市列表
    const res = await getFiltersDataAPI()
    // console.log(res)
    this.cities = res.data.data.citys
    // console.log(this.cities)
    this.cityIndex = Object.keys(this.cities)
    // this.cityIndex
    this.cityPositions = res.data.data.cityPositions
  }
}
</script>

<style lang="less">
.exam {
  .head {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;

    .tilte {
      font-size: 26px;
    }
    .van-dropdown-menu__bar {
      box-shadow: 0 0px 0px;
    }

    span {
      margin-top: 10px;
      margin-left: 5px;
      font-size: 16px;
    }
  }
  .van-cell {
    padding: 0;
    .navigation {
      padding: 0;
      margin-top: 0.625rem;
      padding: 0;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      overflow: scroll;
      margin-bottom: 0.25rem;
      &::-webkit-scrollbar {
        display: none;
      }
      text-align: center;
      .van-tag {
        display: block;
        flex-shrink: 0;
        width: 1.425rem;
        height: 0.7rem;
        line-height: 0.7rem;
        background: #f7f4f5;
        border-radius: 0.4rem;
        font-size: 0.3rem;
        color: #545671;
        letter-spacing: 0.28px;
        text-align: center;
        font-weight: 400;
        margin: 0 0.275rem;
      }
      .navigationActive {
        background: #00b8d4;
        color: #fff;
      }
    }
  }
  .nav-box {
    display: flex;
    margin-top: 50px;

    .leftbox,
    .centrebox,
    .rightbox {
      > div {
        > div {
          margin-bottom: 15px;
        }
        margin-bottom: 50px;
      }
      flex: 1;
      text-align: center;
      i {
        font-size: 26px;
        background: red;
        padding: 10px;
        border-radius: 50%;
        color: #fff;
      }

      div {
        font-size: 14px;
      }
    }

    .centrebox {
      margin: auto;
      .center {
        width: 120px;
        height: 120px;
        // border: 1px solid red;
        background: url('~@/assets/circleBg.png');
        background-size: 100%;
        .circle {
          // width: 100% !important;
          // height: 100% !important;
          padding: 10px;
          .circle-div {
            // padding-top: 35px;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, #ff6f92, #e40137);
            border-radius: 50%;
            font-size: 16px;
            color: #fff;
            text-align: center;
          }
        }
      }
    }
  }
  .rump {
    text-align: center;
  }
  .van-button {
    border-radius: 10px;
    width: 90%;
    margin: auto;
  }
}
</style>
